<template>
    <div class="product-content">
        <!-- <el-form label-width="100px" style="margin-top: 20px;">
            <el-form-item label="商品标题">
                <el-input v-model="list.title"></el-input>
            </el-form-item>
            <el-form-item label="标题颜色：">
                <el-color-picker v-model="list.titleColor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item label="标题图片：">

            </el-form-item>


        </el-form>
        <vuedraggable v-model="list.data" tag="ul" draggable="li" v-if="list.data && list.data.length > 0"
            class="image-list">
            <li v-for="(item, index) in list.data" :key="index">
                <div class="l-info">
                    <p>
                        <span class="sort">排序{{ index + 1 }}</span>
                    </p>
                    <p>
                        <span>名称：</span>
                        <span class="text">{{ item && item.name }}</span>
                    </p>
                    <p class="h_input">
                        <span>高度：</span>
                        <el-input placeholder="请输入高度" v-model="item.height"
                            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" clearable>
                            <template slot="append">px</template>
</el-input>
</p>
<p>
    <span>链接：</span>
    <el-tooltip effect="dark" :content="list.link" placement="top" v-if="list.link">
        <span class="text" @click="urlPopup(index)">{{
            list.linkName
            }}</span>
    </el-tooltip>
    <span v-else @click="urlPopup(index)" class="link">请输入跳转链接</span>
</p>
</div>
<div class="r-image">
    <span @click="removeImage(index)" class="el-icon-close"></span>
    <div class="image-box">
        <img :src="item && item.url" />
        <span @click="addImage(index)" class="el-icon-edit-outline"></span>
    </div>
</div>
</li>
</vuedraggable>
<template v-if="list.data && list.data.length < len">
            <el-button type="primary" icon="el-icon-plus" @click="addImage(null)" class="add-image">
                添加图片
            </el-button>
            <p class="size">（建议尺寸：{{ size }}）</p>
        </template>
<el-upload ref="upload" :http-request="upload" :show-file-list="false" multiple action style="display: none">
</el-upload>
<p class="tit">商品列表 <span>（可拖动排序）</span></p> -->
        <!-- <div class="options">
            <el-form label-width="80px">
                <template v-for="(key, val, index) in options">
                    <el-form-item :label="key" :key="index" v-if="loadingOption">
                        <el-switch v-model="list['options'][val]" :name="val"
                            @change="optionsChange(val, $event)"></el-switch>
                    </el-form-item>
                </template>
            </el-form>
        </div> -->

        <!--  <el-dialog title="添加商品" :visible.sync="show" @close="close">
            <el-form label-width="100px">
                <el-form-item label="选择商品">
                    <el-select v-model="selectProduct" filterable remote reserve-keyword placeholder="请输入商品名称"
                        :remote-method="searchProductList" @change="addProduct" :loading="loading">
                        <el-option v-for="item in productList" :key="item.ID" :label="item.name" :value-key="item.name"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="confirm">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="请选择跳转链接" :visible.sync="show" @close="close" :destroy-on-close="true">
            <RoutLink :link="list.link" @selpage="selpage"></RoutLink>
        </el-dialog> -->
    </div>
</template>

<script>
// import { searchProduct } from '@/api/pageDecoration.js'
import RoutLink from "@/components/RoutLink/RoutLink.vue"

import vuedraggable from 'vuedraggable'
export default {
    name: 'Product',
    components: {
        vuedraggable,
        RoutLink
    },
    props: {
        data: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            list: {},
            productList: [],
            loading: false,
            show: false,
            url: "",
            index: null,
            imageIndex: null,
            link: "",
            selectItem: null,
            selectProduct: '',

            options: {
                originalPrice: '划线价',
                goodRatio: '库存数',
                volumeStr: '销量数'
            },
            loadingOption: false
        }
    },
    computed: {
        size() {
            return "750*100";
        },
        len() {
            return 1
        },
    },
    mounted() {
        this.list = this.data
        if (!this.data.tabType) {
            this.$emit('changeTab', 1)
        }
        // 默认开启所有选项
        for (let key in this.options) {
            if (this.data.options[key] == undefined) {
                this.$set(this.list.options, key, true)
            }
        }
        this.loadingOption = true
    },
    methods: {
        selpage(e) {
            this.list["link"] = e.ID
            this.list["linkName"] = e.name
            this.list["goodsType"] = e.goodsType
            this.show = false;
        },
        urlPopup(index) {
            this.show = true;
            this.index = index;
            this.list.link = this.list["link"];
        },
        removeImage(index) {
            this.list.data.splice(index, 1);
        },
        addImage(index) {
            this.imageIndex = index;
            this.$refs["upload"].$children[0].$refs.input.click();
        },
        upload(params) {
            let that = this;
            const len = this.list.data.length;

            if (len >= this.len) {
                this.$message.error(`最多添加${this.len}张图片!`);
                return;
            }
            const file = params.file,
                fileType = file.type;

            const verifyList = [
                {
                    text: "只能上传图片格式png、jpg、gif!",
                    result: fileType.indexOf("image") != -1,
                },
                {
                    text: "只能上传大小小于5M",
                    result: file.size / 1024 / 1024 < 5,
                },
            ];

            for (let item of verifyList) {
                if (!item.result) {
                    this.$message.error(item.text);
                    return;
                }
            }
            let types = params.file.name.split(".")
            let key = new Date()
            key = that.$template + '/' + key.getTime() + "." + types[types.length - 1]
            const form = new FormData();
            form.append("file", file);
            form.append("clientType", "multipart/form-data");
            form.append("key", key);
            this.getToken().then(
                (res) => {
                    form.append("token", res.data.token);
                    that
                        .$http({
                            url: res.data.upload,
                            method: "post",
                            headers: {
                                "Content-Type": "multipart/form-data",
                                token: res.data.token,
                            },
                            data: form,
                            dataType: "json",
                            cache: false, //上传文件无需缓存
                            processData: false, //用于对data参数进行序列化处理 这里必须false
                            contentType: false, //必须
                        })
                        .then((ress) => {
                            const index = this.imageIndex;
                            const data = {
                                name: file.name,
                                url: res.data.url + key,
                                link: "",
                                form,
                            };
                            if (index !== null) {
                                that.$set(that.list.data, index, data);
                            } else {
                                that.list.data.push(data);
                            }
                        });
                },
                function () {
                    console.log("请求失败处理");
                }
            );
        },
        optionsChange(key, result) {
            this.$set(this.list.options, key, result)
        },
        deleteItem(index) {
            this.list.data.splice(index, 1)
        },
        // 搜索商品
        searchProductList(productName) {
            this.request('api/add_goods/', 'get', { page: 1, size: 50, keyword: productName }).then(res => {
                this.productList = res.data.data
            })
            // this.productList=productList
        },
        confirm() {
            this.list.data.push(this.selectItem)
            this.close()
        },
        toggleSearchPopup() {
            this.show = true
        },
        close() {
            this.show = false
            this.selectItem = null
            this.selectProduct = ''
        },
        addProduct(data) {
            this.selectItem = data
        }
    }
}
// 模拟产品列表
var productList = [{
    "productId": 3601,
    "productName": "驼大大新疆正宗骆驼奶粉初乳骆驼乳粉蓝罐礼盒装120g*4罐",
    "img": "https://img.quanminyanxuan.com/excel/f6860885547648d9996474bbf21fdca9.jpg",
    "productPrice": 299,
    "originalPrice": 598,
    "volumeStr": "741",
    "goodRatio": 98
}, {
    "productId": 3268,
    "productName": "百合28件套新骨质瓷餐具",
    "img": "https://img.quanminyanxuan.com/excel/185e7365f65543f2b4ebc67036d6a78f.jpg",
    "productPrice": 370,
    "originalPrice": 1388,
    "volumeStr": "400",
    "goodRatio": 99
}, {
    "productId": 3343,
    "productName": "和商臻品槐花蜜250克/瓶",
    "img": "https://img.quanminyanxuan.com/excel/4626c8c628d04935b0262d04991416b2.jpg",
    "productPrice": 34.5,
    "originalPrice": 72,
    "volumeStr": "258",
    "goodRatio": 98
}, {
    "productId": 3330,
    "productName": "鲍参翅肚浓羹350g袋装",
    "productImg": "https://img.quanminyanxuan.com/excel/58a0c968dc7d42c3ac21e09d1862aa6f.jpg",
    "productPrice": 75,
    "originalPrice": 128,
    "volumeStr": "258",
    "goodRatio": 98
}]
</script>

<style lang="scss">
.product-content {
    .tit {
        text-align: center;
        font-size: 12px;
        color: #666;
        margin: 18px 0;
        padding-bottom: 10px;
        border-bottom: 1px dashed #ddd;
    }

    .add-btn {
        width: calc(100% - 30px);
        height: 34px;
        line-height: 34px;
        padding: 0;
        font-size: 12px;
        margin-left: 15px;
        margin-top: 5px;
    }

    .list {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        margin: 0;

        .item {
            width: 70px;
            height: 70px;
            border-radius: 6px;
            margin: 4px;
            position: relative;
            transition: all .3s;
            list-style: none;

            img {
                width: 100%;
                height: 100%;
                border-radius: 4px;
            }

            i {
                position: absolute;
                top: -6px;
                right: -6px;
                cursor: pointer;
                opacity: 0;
                transition: all .3s;
                color: red;
            }

            &::before {
                content: '';
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                right: 0;
                background: rgba(0, 0, 0, .4);
                border-radius: 4px;
                opacity: 0;
                transition: all .3s;
            }

            &:hover {
                cursor: grab;

                &::before,
                i {
                    opacity: 1;
                }
            }
        }
    }

    .options {
        padding: 15px;
        border-radius: 6px;

        .el-form {
            background: #f7f8f9;
            overflow: hidden;
            padding: 10px 0;

            .el-form-item {
                margin: 0;

                label {
                    font-size: 12px;
                }
            }
        }
    }
}

.image-list {
    margin: 0;
    padding: 0 10px;
    overflow: auto;

    &::-webkit-scrollbar-thumb {
        background: #dbdbdb;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-track {
        background: #f6f6f6;
        border-radius: 10px;
    }

    &::-webkit-scrollbar {
        width: 6px;
    }

    li {
        list-style: none;
        background: #f7f8f9;
        border-radius: 4px;
        padding: 6px 14px 10px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        &.disable div {
            pointer-events: none;
            user-select: none;
        }

        .l-info {
            font-size: 12px;
            padding-top: 8px;
            width: calc(100% - 70px);

            p {
                margin: 12px 0 0;
                white-space: nowrap;
                overflow: hidden;
                display: flex;

                .link {
                    color: #1b8bff;
                    cursor: pointer;
                }

                .text {
                    white-space: nowrap;
                    text-align: -webkit-auto;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    cursor: pointer;
                    color: #1b8bff;
                }
            }
        }

        .r-image {
            text-align: right;

            .el-icon-close {
                color: #999;
                font-size: 12px;
                font-weight: 600;
                margin-bottom: 6px;
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }

            .image-box {
                width: 70px;
                height: 70px;
                border-radius: 5px;
                overflow: hidden;
                position: relative;
                background: #fff;
                display: flex;
                justify-content: center;
                align-items: center;

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.5);
                    opacity: 0;
                    transition: all 0.3s;
                }

                span {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    color: #fff;
                    transform: translate(-50%, -50%);
                    font-size: 20px;
                    cursor: pointer;
                    opacity: 0;
                    transition: all 0.3s;
                }

                img {
                    max-width: 100%;
                }

                &:hover {

                    &::before,
                    span {
                        opacity: 1;
                    }
                }
            }
        }
    }
}

.size {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-bottom: 0;
}

.add-image {
    width: calc(100% - 20px);
    height: 34px;
    line-height: 34px;
    padding: 0;
    font-size: 12px;
    margin-left: 10px;
    margin-top: 10px;
}
</style>